<template>
  <table class="table">
    <thead>
      <table-head></table-head>
    </thead>
    <tbody>
      <table-tr
        v-for="item in productList"
        :key="item.id"
        :item="item"
      ></table-tr>
    </tbody>
  </table>
</template>

<script setup>
import TableHead from "./TableHead.vue";
import TableTr from "./TableTr.vue";
import { useBodyHttpHook } from "./Hooks/useCarBodyHook";
import mitts from "../bus";
const productList = useBodyHttpHook();
mitts.on("changeProductList-select", (e) => {
  productList.value.forEach((item) => {
    item.isSelected = e;
  });
});
mitts.on("delPro", (id) => {
  productList.value = productList.value.filter((item) => {
    return item.id !== id;
  });
});
watch(productList, (newval) => {
  mitts.emit("giveProductList", productList.value);
});
</script>

<style lang="scss" scoped>
.table {
  width: 100%;
  border: 1px solid #aaa;
  border-collapse: collapse;
}
</style>
